<template>
    <div>
        <page-header title="添加培育计划" content="Add cultivation plan" />
        <page-main>
            <h1>
                <el-page-header @back="goBack" />
            </h1>
            <el-row type="flex" justify="center" :gutter="50">
                <el-col :xs="24" :sm="18" :md="16" :lg="12" :xl="12">
                    <el-card>
                        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px"
                                 label-position="center"
                        >
                            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="12">
                                <el-form-item label="院系:" prop="field102">
                                    <el-select v-model="formData.field102" placeholder="请选择院系" clearable :style="{width: '100%'}" @change="findAll_Major">
                                        <el-option v-for="(item, index) in field102Options" :key="index" :label="item.department_name"
                                                   :value="item.id" :disabled="item.disabled"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="12">
                                <el-form-item label="专业:" prop="field101">
                                    <el-select v-model="formData.field101" value-key="id" placeholder="请选择专业" clearable :style="{width: '100%'}">
                                        <el-option v-for="(item, index) in field101Options" :key="index" :label="item.major_name"
                                                   :value="item" :disabled="item.disabled"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="12">
                                <el-form-item label="开课时间:" prop="field103">
                                    <el-select v-model="formData.field103" placeholder="请选择专业" clearable :style="{width: '100%'}">
                                        <el-option v-for="(item, index) in field103Options" :key="index" :label="item.name"
                                                   :value="item.id" :disabled="item.disabled"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="12">
                                <el-form-item label="选择课程:">
                                    <el-select
                                        v-model="value"
                                        value-key="id"
                                        multiple
                                        filterable
                                        remote
                                        reserve-keyword
                                        :collapse-tags="true"
                                        placeholder="请输入课程名称"
                                        :remote-method="remoteMethod"
                                        :loading="loading"
                                    >
                                        <el-option
                                            v-for="item in options"
                                            :key="item.id"
                                            :label="item.course_name"
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <h2>选择的信息：</h2>
                                <el-card style="margin: 5px;">
                                    选择的专业是：
                                    <b style="color: #ffb86c;">{{formData.field101.major_name}}</b>
                                    <br>
                                    选择的开课时间是：
                                    <b style="color: #409eff;">{{formData.field103}}</b>
                                </el-card>
                            </el-col>
                            <el-col :span="24">
                                <h2>添加的课程有：</h2>
                                <b style="color: #5e83a3;">
                                    橙色标签为“<b style="color: #ffb86c;">必修课</b>”，蓝色标签为“<b style="color: #409eff;">专业选修课</b>”
                                </b>
                                <el-card style="margin: 5px;">
                                    <el-tag
                                        v-for="item in value"
                                        :key="item.course_name"
                                        closable
                                        style="margin: 5px; font-size: 18px;"
                                        effect="plain"
                                        :type="item.course_nature =='必修课'?'warning':''"
                                        @close="handleClose(item.id)"
                                    >
                                        {{ item.course_name }}
                                    </el-tag>
                                </el-card>
                            </el-col>
                        </el-form>
                        <el-col :round="true" :push="9" style="margin: 10px;">
                            <el-button type="primary" @click="addCultivationPlan">
                                添加
                            </el-button>
                        </el-col>
                    </el-card>
                </el-col>
            </el-row>
        </page-main>
    </div>
</template>

<script>
import PageMain from '../../components/PageMain/index'
import api from '../../api'
export default {
    name: 'add.cultivation.plan',
    components: {PageMain},
    data() {
        return {
            formData: {
                field102: 124,
                field101: [],
                field103: '大一（上学期）',
                field104: 1,
                field105: []
            },
            rules: {
                field102: [{
                    required: true,
                    message: '请选择院系',
                    trigger: 'change'
                }],
                field101: [{
                    required: true,
                    message: '请选择专业',
                    trigger: 'change'
                }]
            },
            field101Options: [],
            field102Options: [],
            field103Options: [
                {
                    id: '大一（上学期）',
                    name: '大一（上学期）'
                },
                {
                    id: '大一（下学期）',
                    name: '大一（下学期）'
                },
                {
                    id: '大二（上学期）',
                    name: '大二（上学期）'
                },
                {
                    id: '大二（下学期）',
                    name: '大二（下学期）'
                },
                {
                    id: '大三（上学期）',
                    name: '大三（上学期）'
                },
                {
                    id: '大三（下学期）',
                    name: '大三（下学期）'
                },
                {
                    id: '大四（上学期）',
                    name: '大四（上学期）'
                },
                {
                    id: '大四（下学期）',
                    name: '大四（下学期）'
                }],
            options: [],
            value: [],
            loading: false,
            states: [{}],
            tag_type: '',
            addData: [{
                MajorID: [],
                course: [],
                start_time: ''
            }]
        }
    },
    created() {
        var _this = this
        api.post('department/findAll').then(res => {
            _this.field102Options = res.data
        })
        api.post('major/findByDepartmentID', {
            data: this.formData.field102})
            .then(res => {
                _this.field101Options = res.data
                _this.formData.field101 = res.data[0]

            })
    },
    mounted() {
        var _this = this
        api.post('/course/findAll')
            .then(res => {
                _this.states = res.data
            })
    },
    methods: {
        goBack() {
            this.$router.push({path: '/school/cultivation_plan'})
        },
        findAll_Major() {
            var _this = this
            api.post('major/findByDepartmentID', {
                data: this.formData.field102})
                .then(res => {
                    _this.field101Options = res.data
                    _this.formData.field101 = res.data[0]

                })
        },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                    this.options = this.states.filter(item => {
                        return item.course_name.toLowerCase()
                            .indexOf(query.toLowerCase()) > -1
                    })
                }, 200)
            } else {
                this.options = []
            }

        },
        handleClose(tag) {
            this.value.splice(this.value.indexOf(tag), 1)
            console.log(this.value)
        },
        addCultivationPlan() {
            this.addData.MajorID = this.formData.field101
            this.addData.course = this.value
            this.addData.start_time = this.formData.field103

            console.log(this.addData)
            this.$confirm('是否核实并确定添加信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(() => {
                var _this = this
                api.post('cultivationPlan/addCultivationPlan', {
                    MajorID: this.addData.MajorID.id,
                    course: this.addData.course,
                    start_time: this.addData.start_time})
                    .then(res => {
                        _this.field101Options = res.data
                        _this.formData.field101 = res.data[0].id

                    })
                this.$router.push({path: '/school/cultivation_plan'})

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })

        }
    }
}
</script>
